<template>
  <div id="app">
    <div>
      <h1>路由vue-router</h1>
      <router-link to="/">home</router-link>
      <router-link to="/about">about</router-link>
      <router-view />
    </div>
    <hr />
    <div>
      <h1>状态管理vuex</h1>
      年龄：{{ $store.state.age }}<br />
      我的年龄：{{ $store.getters.myage }}<br />
      我的年龄：{{ $store.getters.myage }}<br />
      我的年龄：{{ $store.getters.myage }}<br />
      我的年龄：{{ $store.getters.myage }}<br />
      我的年龄：{{ $store.getters.myage }}<br />
      <button @click="$store.commit('add', 1)">调用根模块mutation</button>
      <button @click="actionAdd">调用根模块action</button>
      <button @click="$store.state.age++">直接修改</button>
      <br />
      <br />
      <button @click="$store.commit('a/add', 1)">调用a模块mutation</button>
      <button @click="$store.dispatch('a/add', 10)">调用a模块action</button>
      <br />
      <br />
      <button @click="$store.commit('a/aa/add', 1)">调用aa模块mutation</button>
      <button @click="$store.dispatch('a/aa/add', 100)">调用aa模块action</button>
      <br />
      <br />
      <button @click="$store.commit('b/add', 1)">调用b模块mutation</button>
      <button @click="$store.dispatch('b/add', 1000)">调用b模块action</button>
      <div>
        <h3>a模块</h3>
        a的年龄：{{ $store.state.a.age }}<br />
        a中的计算属性：{{
          $store.getters["a/myage"] || $store.getters["myage"]
        }}
        <h4>a模块下的aa模块</h4>
        aa的年龄：{{ $store.state.a.aa.age }}<br />
        aa中的计算属性：{{
          $store.getters["a/aa/myage"] || $store.getters["a/myage"]
        }}
      </div>
      <div>
        <h3>b模块</h3>
        b的年龄：{{ $store.state.b.age }}
      </div>
      <div>
        <h3>动态注册的c模块</h3>
        c的年龄：{{ $store.state.a.c.name }} <br />
        c的计算属性：{{ $store.getters["a/c/myName"] }} <br />
        <button @click="$store.commit('a/c/add', '!')">更改c</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  mounted() {
    // console.log(this.$store.state);
  },
  methods: {
    actionAdd(){
      this.$store.dispatch('add', 5).then(() => {
        console.log('ok');
      })
    }
  }
};
</script>
